<template>
  <div>
    <div class="container" ref="body">
      <!-- 头部选项卡 -->
      <div class="nav">
        <ul>
          <li class="logo">
            <img src="../assets/images/logo.png" alt="">
          </li>
          <li class="subnav">
            <!-- <ul>
              <li class="con">男频</li>
              <li>女频</li>
              <li>悬疑</li>
            </ul> -->
          </li>
          <router-link tag="li" to="/shelf" class="bookshelf"></router-link>
        </ul>
      </div>
      <!-- 搜索框 -->
      <router-link tag="div" to="/search" class="search">
        <div class="search_wrap">
          <input type="text">
          <button></button>
        </div>
      </router-link>
      <!-- 轮播图 -->
      <div class="swiper myswiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../assets/images/ban1.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/ban2.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/ban3.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="../assets/images/ban4.jpg" alt="">
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <!-- 功能栏 -->
      <div class="column bor_bot">
        <ul>
          <router-link tag="li" to="/shelf">
            <a href="javascript:;">
              读过
            </a>
          </router-link>
          <router-link tag="li" to="/rank">
            <a href="javascript:;">
              排行
            </a>
          </router-link>
          <router-link tag="li" to="/end">
            <a href="javascript:;">
              完本
            </a>
          </router-link>
          <router-link tag="li" to="/library">
            <a href="javascript:;">
              书库
            </a>
          </router-link>
          <router-link tag="li" to="/pay">
            <a href="javascript:;">
              充值
            </a>
          </router-link>
        </ul>
      </div>
      <!-- 最近阅读 -->
      <!-- <div class="recently bor_bot">
        <span>最近阅读</span>
        豪门赘婿：第1章 借钱受辱
      </div> -->

      <!-- 火爆热书 -->
      <div class="list_books bor_bot">
        <div class="books_tit">
          火爆热书
        </div>
        <div class="books_cont" v-if="booksData">
          <ul>
            <router-link tag="li" :to="{ path: '/about', query: { userId: index } }" v-for="(item,index) in booksData.slice(0, 2)" :key="index">
              <div class="img">
                <img :src="item.iconUrl" alt="">
              </div>
              <div class="intro">
                <div class="in_tit">
                  {{item.title}}
                </div>
                <p>
                  {{ item.description }}
                </p>
                <div class="in_foot">
                  <div class="state">
                    <span>{{ item.bookStatus ? '完结' : '连载'}}</span>
                  </div>
                  <div class="book_type">
                    <span class="book_num">{{ item.showTotalCount }}</span>
                    <span>{{ item.category }}</span>
                  </div>
                </div>
              </div>
            </router-link>
          </ul>
        </div>
      </div>
      <!-- 推荐好书 -->
      <div class="recomm bor_bot">
        <div class="img">
          <img src="../assets/images/recomm.jpg" alt="">
        </div>
        <div class="recomm_tit">
          <span>推荐</span>
          堂堂的漠北兵王，居然要回家当奶爸?
        </div>
      </div>

      <!-- 潜力新书 -->
      <div class="list_books bor_bot" v-if="booksData">
        <div class="books_tit">
          潜力新书
        </div>
        <div class="books_list">
          <ul>
            <li v-for="(item,index) in booksData.slice(2,8)" :key="index">
              <div class="img">
                <img :src="item.iconUrl" alt="">
              </div>
              <span>{{ item.title }}</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 热门/精品/完本 -->
      <div class="list_books bor_bot">
        <div class="books_tabs">
          <ul>
            <li :class="bookList == 0 ? 'con':''" @click="bookList = 0">
              <span>
                热门
              </span>
            </li>
            <li :class="bookList == 1 ? 'con':''" @click="bookList = 1">
              <span>
                精品
              </span>
            </li>
            <li :class="bookList == 2 ? 'con':''" @click="bookList = 2">
              <span>
                完本
              </span>
            </li>
          </ul>
        </div>
        <!-- 热门 -->
        <div class="tabody" v-if="bookList == 0">
          <div class="books_cont">
            <ul class="sort_uls">
              <li>
                <div class="img">
                  <img src="../assets/images/books1.jpg" alt="">
                </div>
                <div class="intro">
                  <div class="in_tit">
                    豪门赘婿
                  </div>
                  <p>
                    他是一个人尽皆知的乡下女婿，也经历了无数次的讥讽与侮辱，直到有一天，他的亲生父母找到他，说：“我们把所有都给你！”
                    一夜之间，他成为了本市首富。
                    于是，他给了她羡煞众生的宠爱！
                  </p>
                  <div class="in_foot">
                    <div class="state">
                      <span>完结</span>
                    </div>
                    <div class="book_type">
                      <span class="book_num">280.9万字</span>
                      <span>都市</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="books_sort">
            <ul>
              <li v-for="(item,index) in booksSort" :key="index">
                <em>[都市]</em>
                <span :class="item.style?'over':'hot'">{{item.title}}</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 精品 -->
        <div class="tabody" v-if="bookList == 1">
          <div class="books_cont">
            <ul class="sort_uls">
              <li>
                <div class="img">
                  <img src="../assets/images/books2.jpg" alt="">
                </div>
                <div class="intro">
                  <div class="in_tit">
                    豪门赘婿
                  </div>
                  <p>
                    他是一个人尽皆知的乡下女婿，也经历了无数次的讥讽与侮辱，直到有一天，他的亲生父母找到他，说：“我们把所有都给你！”
                    一夜之间，他成为了本市首富。
                    于是，他给了她羡煞众生的宠爱！
                  </p>
                  <div class="in_foot">
                    <div class="state">
                      <span>完结</span>
                    </div>
                    <div class="book_type">
                      <span class="book_num">280.9万字</span>
                      <span>都市</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="books_sort">
            <ul>
              <li>
                <em>[都市]</em>
                <span class="over">首富继承人</span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 完本 -->
        <div class="tabody" v-if="bookList == 2">
          <div class="books_cont">
            <ul class="sort_uls">
              <li>
                <div class="img">
                  <img src="../assets/images/books1.jpg" alt="">
                </div>
                <div class="intro">
                  <div class="in_tit">
                    豪门赘婿
                  </div>
                  <p>
                    他是一个人尽皆知的乡下女婿，也经历了无数次的讥讽与侮辱，直到有一天，他的亲生父母找到他，说：“我们把所有都给你！”
                    一夜之间，他成为了本市首富。
                    于是，他给了她羡煞众生的宠爱！
                  </p>
                  <div class="in_foot">
                    <div class="state">
                      <span>完结</span>
                    </div>
                    <div class="book_type">
                      <span class="book_num">280.9万字</span>
                      <span>都市</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="books_sort">
            <ul>
              <li>
                <em>[都市]</em>
                <span class="over">首富继承人</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 编辑推荐 -->
      <div class="list_books bor_bot" v-if="booksData">
        <div class="books_tit">
          编辑推荐
        </div>
        <div class="books_sort">
          <ul>
            <li v-for="(item,index) in booksData.slice(0,10)" :key="index" @click="log(item.sourceUrl)">
              <i :class="index<3?'top_three':''">{{index + 1}}</i>
              <em>[{{ item.category }}]</em>
              <span :class="item.free4LimitedTime?'':item.bookStatus?'over':'hot'">{{ item.title }}</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 搜索框 -->
      <router-link tag="div" to="/search" class="search">
        <div class="search_wrap">
          <input type="text">
          <button></button>
        </div>
      </router-link>
      <!-- 页脚信息 -->
      <div class="footer">
        <div class="foot_tit">
          <ul>
            <li>
              <a href="javascript:;">首页</a>
            </li>
            <li>
              <a href="javascript:;">书库</a>
            </li>
            <li>
              <a href="javascript:;">书架</a>
            </li>
            <li>
              <a href="javascript:;">账户</a>
            </li>
            <li>
              <a href="javascript:;">客户端</a>
            </li>
          </ul>
        </div>
        <div class="foot_cont">
          <div class="foot_info">
            <p>客服QQ群：326738643</p>
            <p>客服电话：010-86462015-800</p>
            <p>©2020北京爱书客科技有限公司</p>
            <p>京ICP备13037522号</p>
          </div>
          <div class="info_img">
            <img src="../assets/images/ledu.png" alt="">
            <span>乐读书城</span>
          </div>
        </div>
      </div>
      <div class="scrBar" @click="scrollTop" v-show="false">

      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper/js/swiper";
import { getJsonData, getSortData } from '../api/home';
export default {
  data(){
    return {
      bookList:0,
      booksData:null,
      booksSort:null
    }
  },
  created(){
    getJsonData().then(data => {
      this.booksData = data.data.books;
      console.log(this.booksData);
    })
    getSortData().then(data =>{
      this.booksSort = data.data.books
    })
  },
  mounted() {
    new Swiper('.myswiper', {
      loop: true,
      autoplay:true,
      pagination: {
        el: '.swiper-pagination',
      },
    })
    // window.addEventListener('scroll',this.scrollTop)
  },
  methods:{
    scrollTop(){
      // console.log(window.scrollY);//滚动条当前高度
      // console.log(this.$refs.body.offsetHeight);//页面总高度
    },
    log(txt){
      console.log(txt)
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
  height: 47px;
  border-bottom: 1px solid #e5e5e5;

  ul {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;

    li {
      flex: 3;
    }

    .logo {
      img {
        width: 92px;
        height: 18px;
        margin: auto;
      }
    }

    .subnav {
      &>ul {
        width: 138px;
        height: 26px;
        margin: auto;
        border-radius: 13px;
        background-color: #f0f0f0;
        overflow: hidden;

        &>li {
          flex: 1;
          text-align: center;
          color: #000;
          height: 26px;
          line-height: 26px;
        }

        &>.con {
          background-color: #ea4136;
          color: #fff;
          border-radius: 13px;
        }
      }
    }

    .bookshelf {
      flex: 2;
      display: flex;
      justify-content: flex-end;
      padding-right: 4px;

      &::before {
        content: "";
        display: block;
        width: 47px;
        height: 47px;
        background-image: url('../assets/images/header_ico1.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 24px;
      }
    }
  }
}

.search {
  padding: 10px 14px;

  .search_wrap {
    display: flex;
    padding: 4px 0 4px 17px;
    border: 1px solid #dbdbdb;
    height: 32px;
    border-radius: 20px;
    overflow: hidden;

    &>input {
      border: 0px;
      outline: none;
      flex: 6;
      color: #999;
    }

    &>button {
      flex: 1;
      background-image: url('../assets/images/searchBar.png');
      background-repeat: no-repeat;
      border: 0px;
      background-color: #fff;
      position: relative;
      border-left: 1px solid #dbdbdb;
      background-size: 18px;
      background-position: center;
    }
  }
}

.myswiper{
  position: relative;
  overflow: hidden;
  ::v-deep .swiper-pagination-bullet{
    width: 6px;
    height: 6px;
    margin: 0 3px;
    background-color: #fff !important;
    opacity: 1;
  }
    ::v-deep .swiper-pagination-bullet-active{
      background-color: #ea4136 !important;
    }
}

.column{
  padding: 12px 0;
  ul{
    display: flex;
    &>li{
      flex: 1;
      a{
        display: block;
        height: 17px;
        padding-top: 47px;
        background-image: url('../assets/images/nav_1.png');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 40px;
        text-align: center;
        color: #666;
        font-size: 14px;
      }

      &:nth-child(1){
        a{
          background-image: url('../assets/images/nav_5.png');
        }
      }
      &:nth-child(2){
        a{
          background-image: url('../assets/images/nav_1.png');
        }
      }
      &:nth-child(3){
        a{
          background-image: url('../assets/images/nav_2.png');
        }
      }
      &:nth-child(4){
        a{
          background-image: url('../assets/images/nav_3.png');
        }
      }
      &:nth-child(5){
        a{
          background-image: url('../assets/images/nav_4.png');
        }
      }
    }
    
  }
}
.recently{
  padding: 0 14px;
  color: #333;
  font-size: 14px;
  height: 35px;
  line-height: 35px;
  border-top: 1px solid #e5e5e5;
  span{
    font-size: 14px;
    color: #ea4136;
    padding-right: 7px;
  }
}
.bor_bot{
  border-bottom: 10px solid #eaeaea;
}
.list_books{
  padding: 0 14px;
  .books_tit{
    padding-left: 8px;
    height: 52px;
    line-height: 52px;
    border-bottom: 1px solid #ebebeb;
    background-image: url('../assets/images/daohang_redIco.jpg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 4px;
    color: #333;
    font-size: 16px;
  }
  .books_cont{
    .sort_uls {
        padding-bottom: 0px;
    }
    ul{
      padding-bottom: 28px  ;
      li{
        display: flex;
        padding-top: 24px;
        .img{
          flex: 1;
          img{
            width: 100px;
            height: 140px;
          }
        }
        .intro{
          flex: 2;
          padding-left: 5px;
          .in_tit{
            height: 47px;
            color: #666;
            font-size: 18px;
          }
          &>p{
            height: 47px;
            line-height: 22px;
            font-size: 13px;
            color: #999;
            text-indent: 26px;
            overflow: hidden;
          }
        }
        .in_foot{
          display: flex;
          justify-content: space-between;
          padding-top: 29px;
          span{
            border: 1px solid #fff;
            display: block;
            font-size: 12px;
            height: 10px;
            line-height: 10px;
            padding: 2px 3.5px;
          }
          .state{
            span{
              border-color: #ea4136;
              color: #ea4136;
            }
          }
          .book_type{
            display: flex;
            .book_num{
              border-color: #f39800;
              color: #f39800;
              margin-right: 6px;
            }
            span{
              border-color: #706262;
              color: #706262;
            }
          }
        }
      }
    }
  }
  .books_list{
    ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-bottom: 23px;
      li{
        padding-top: 18px;
        width: 30%;
        .img{
          img{
            width: 104px;
            height: 145px;
            display: block;
          }
        }
        span{
          display: block;
          font-size: 13px;
          color: #666;
          padding-top: 6px;
          height: 37px;
        }
        
      }


    }
  }
  .books_tabs{
    padding-top: 12px;
    ul{
      display: flex;
      border-bottom: 1px solid #e5e5e5;
      li{
        width: 33.3%;
        padding-top: 6px;
        span{
          display: block;
          width: 75%;
          margin: auto;
          height: 31px;
          line-height: 18px;
          text-align: center;
          font-size: 18px;
          color: #333;
        }
      }
      .con{
        span{
          border-bottom: 2px solid #ea4136;
          color: #ea4136;
        }
      }
    }
  }
  
  .books_sort{
    &>ul{
      padding-bottom: 18px;
      li{
        display: flex;
        font-size: 16px;
        line-height: 23px;
        padding-top: 12px;
        i{
          display: block;
          width: 20px;
          height: 20px;
          background-color: #f39800;
          color: #fff;
          border-radius: 5px;
          font-style: normal;
          text-align: center;
          line-height: 20px;
          font-size: 14px;
          margin-right: 9px;
        }
        .top_three{
          background-color: #ea4136;
        }
        em{
          display: block;
          font-style: normal;
          color: #999;
          margin-right: 6px;
          flex: 0 0 50px;
        }
        span{
          display: block;
          color: #333;
          position: relative;
        }
        .over{
          &::after{
            content: "";
            display: inline-block;
            width: 20px;
            height: 21px;
            background-image: url('../assets/images/wanIco.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 20px;
            margin-left: 10px;
            margin-bottom: -5px;
          }
          
        }
        .hot{
          &::after{
            content: "";
            display: inline-block;
            width: 20px;
            height: 21px;
            background-image: url('../assets/images/hotIco.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 20px;
            margin-left: 10px;
            margin-bottom: -5px;
          }
          
        }
      }
    }
  }
}
.recomm{
  font-size: 15px;
  .recomm_tit{
    padding: 9px 12px;
    color: #595959;
    display: flex;
    span{
      display: block;
      width: 41px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      border-radius: 11px;
      background-color: #e7423d;
      color: #fff;
      font-size: 12px;
      margin-right: 10px;
    }
  }
}

.footer{
  padding: 16px 0px 32px 0px;
  background-color: #1c1a1a;
  .foot_tit{
    padding-bottom: 15px;
    ul{
      display: flex;
      li{
        flex: 1;
        a{
          display: block;
          font-size: 16px;
          color: #b6b6b6;
          text-align: center;
          border-right: 1px solid #999999;
          
        }
        &:last-of-type{
          a{
            border: 0px;
          }
        }
      }
    }
  }
  .foot_cont{
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    .foot_info{
      p{
        color: #b6b6b6;
        font-size: 12px;
        line-height: 28px;
      }
    }
    .info_img{
      img{
        width: 98px;
        height: 98px;
      }
      span{
        font-size: 12px;
        display: block;
        text-align: center;
        color: #b6b6b6;
        padding-top: 3px;
      }
    }
  }
}
.scrBar{
  position: fixed;
  bottom: 94px;
  right: 23px;
  width: 25px;
  height: 37px;
  background-image: url('../assets/images/goBack.png');
  background-size: 26px;
}
</style>